<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body {
				min-height: 100vh;
				padding: 20px;
			}
			.container {
				max-width: 1200px;
				margin: 0 auto;
				background: white;
				border-radius: 15px;
				padding: 30px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
			}
			.grid-container {
				display: flex;
				flex-direction: column;
				gap: 10px;
			}
			.grid-row {
				display: flex;
				gap: 10px;
			}
			.grid-item {
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-weight: bold;
				font-size: 16px;
				border-radius: 8px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
				transition: transform 0.3s ease;
				flex-shrink: 0;
			}
			.grid-item:hover {
				transform: translateY(-5px);
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
			}
			.control-panel {
				background: #f8f9fa;
				padding: 20px;
				border-radius: 10px;
				margin-bottom: 30px;
				text-align: center;
			}
			.control-panel label {
				font-weight: bold;
				margin-right: 10px;
			}
			#heightSlider {
				width: 300px;
				margin: 0 10px;
			}
			#heightValue {
				font-weight: bold;
				color: #007bff;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="control-panel">
				<label for="heightSlider">调整统一高度：</label>
				<input
					type="range"
					id="heightSlider"
					min="100"
					max="400"
					value="200"
					step="10"
				/>
				<span id="heightValue">200px</span>
			</div>
			<div class="grid-container" id="gridContainer"></div>
		</div>
		<script>
			const imageData = [
				{ width: 300, height: 200, color: '#ff6b6b', text: '图片1' },
				{ width: 250, height: 200, color: '#4ecdc4', text: '图片2' },
				{ width: 400, height: 200, color: '#45b7d1', text: '图片3' },
				{ width: 180, height: 200, color: '#f9ca24', text: '图片4' },
				{ width: 320, height: 200, color: '#f0932b', text: '图片5' },
				{ width: 280, height: 200, color: '#eb4d4b', text: '图片6' },
				{ width: 350, height: 200, color: '#007bff', text: '图片7' },
				{ width: 220, height: 200, color: '#333333', text: '图片8' }
			];
			function createGridItems(fixedHeight) {
				return imageData.map((data, index) => {
					const element = document.createElement('div');
					element.className = 'grid-item';
					element.style.backgroundColor = data.color;
					element.textContent = data.text;
					const idealWidth = data.width * (fixedHeight / data.height);
					return {
						element: element,
						idealWidth: idealWidth,
						originalWidth: data.width,
						originalHeight: data.height
					};
				});
			}
			function smartGridLayout(customHeight = 200) {
				const container = document.querySelector(".container");
				const gridContainer = document.getElementById("gridContainer");
				gridContainer.innerHTML = "";
				const allItems = createGridItems(customHeight);
				const containerWidth = container.offsetWidth - 60;
				const gap = 10;
				const rows = smartGrouping(allItems, containerWidth, gap);
				rows.forEach((rowItems, rowIndex) => {
					const rowElement = document.createElement("div");
					rowElement.className = "grid-row";
					const totalIdealWidth = rowItems.reduce((sum, item) => sum + item.idealWidth, 0);
					const availableWidth = containerWidth - (rowItems.length - 1) * gap;
					const scale = availableWidth / totalIdealWidth;
					rowItems.forEach(itemData => {
						const finalWidth = itemData.idealWidth * scale;
						itemData.element.style.width = finalWidth + "px";
						itemData.element.style.height = customHeight + "px";
						rowElement.appendChild(itemData.element);
					});
					gridContainer.appendChild(rowElement);
				});
			}
			function smartGrouping(items, containerWidth, gap) {
				const rows = [];
				let currentRow = [];
				let currentRowWidth = 0;
				for (let i = 0; i < items.length; i++) {
					const item = items[i];
					const itemWidth = item.idealWidth;
					const gapWidth = currentRow.length > 0 ? gap : 0;
					if (currentRowWidth + gapWidth + itemWidth <= containerWidth) {
						currentRow.push(item);
						currentRowWidth += gapWidth + itemWidth;
					} else {
						if (currentRow.length > 0) {
							rows.push(currentRow);
						}
						currentRow = [item];
						currentRowWidth = itemWidth;
					}
				}
				if (currentRow.length > 0) {
					rows.push(currentRow);
				}
				return rows;
			}
			function setupHeightControl() {
				const heightSlider = document.getElementById("heightSlider");
				const heightValue = document.getElementById("heightValue");
				heightSlider.addEventListener("input", function () {
					const newHeight = parseInt(this.value);
					heightValue.textContent = newHeight + "px";
					smartGridLayout(newHeight);
				});
			}
			document.addEventListener("DOMContentLoaded", function () {
				setupHeightControl();
				smartGridLayout();
			});
		</script>
	</body>
</html>
